<template>
	<view style="background-color: #fff; padding-bottom: 180rpx;">
     <!-- :class="{ popupShow: isBack }" -->
		<view class="container">
			<view class="news-detail-title">
				{{ newsDetail.title || '标题'}}
			</view>
			<view class="news-detail-subtitle mb-25">
				<text class="type mr-15">{{ newsDetail.createByName || ''}}</text>
				<text class="time">{{ newsDetail.createTime || ''}}</text>
			</view>
			<view class="u-content mb-20">
				<u-parse :html="newsDetail.details || ''" :tag-style="style"></u-parse>
			</view>
		</view>
		
		<!-- 评价 -->
		<view class="container">
			<newsComment ref="newsComment" :id="informationId" @applyBottomFn="isNoBottomFn"></newsComment>
		</view>
	</view>
</template>

<script>
	import newsComment from "./comment/newsComment.vue"; //评论区
	import { API } from '@/config/myApi.js';
	export default {
		data() {
			return {
				newsDetail: {
          title: "",
          createByName: "",
          createTime: "",
          details: ""
        },
        informationId: "",
				style: {
					// 字符串的形式
					p: 'margin-top:24rpx;margin-bottom:34rpx;text-indent: 2em;',
				},
        // 判断 上拉 刷新的是评价、还是 回复
        isBack: false,
        scrollTimer: null,
			};
		},
		components: {
			newsComment,
		},
		onLoad(option) {
      this.informationId = option.id;
			this.getInformationDetail(this.informationId);
		},
    // 当前滚动时候 isBack：true, 说明回复框已开启，滚动的时候运行
    // onPageScroll() {
    //   if(this.scrollTimer != null){
    //     clearTimeout(this.scrollTimer);
    //   }
    //   this.scrollTimer = setTimeout(()=>{
    //     if(this.isBack)
    //     this.$refs.newsComment.applyOnBottomFn()
    //   }, 300)
    // },
    // 上拉加载 加载 组件的列表请求
    onReachBottom() {
      if(!this.isBack)
      this.$refs.newsComment.listOnBottomFn();
      // if (this.isBack) {
      //   console.log("我是---回复")
      //   this.$refs.newsComment.applyOnBottomFn()
      // } else {
      //   console.log("我是---评价")
      //   this.$refs.newsComment.listOnBottomFn();
      // }
    },
		methods:{
      // 获取资讯详情
			getInformationDetail(id){
				API.getInfoDetail(id).then(res=>{
					if(res.code===200){
						// this.newsDetail = res.result
            this.newsDetail = {
              title: res.result.title,
              createByName: res.result.createByName,
              createTime: res.result.createTime,
              details: res.result.details
            }
					}
				})
			},
      isNoBottomFn(data) {
        this.isBack = data;
      }
		}
	}
</script>

<style lang="scss" scoped>
	.news-detail-title {
		padding: 40rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.news-detail-subtitle {
		font-size: 24rpx;
		color: #333333;
		line-height: 20px;

		.type {
			font-weight: 500;
		}

		.time {
			color: #999999;
		}
	}

	.news-detail-content {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 50rpx;

		.content-text {
			text-indent: 2em;

		}
	}
	// 文章
	.u-content {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-top: 18rpx;
		overflow: hidden;
	}
  .popupShow {
  	overflow: hidden;
  	position: fixed;
  }
</style>
